<template>
  <div class="setmealDish">
    <el-row class="mb-3">
      <el-button type="primary" @click="addDish">添加菜品</el-button>
    </el-row>
    <el-table class="tableBox" border :data="selectedDish">
      <el-table-column align="center" prop="name" label="菜品名称" />
      <el-table-column align="center" label="原价">
        <template v-slot="{ row }">
          <el-tag type="danger">￥{{ row.price }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数量">
        <template v-slot="{ row }">
          <el-row justify="center" style="width: 100%">
            <el-button :icon="Minus" @click="reduceDishCount(row)" />
            <div class="number">{{ row.copies }}</div>
            <el-button :icon="Plus" @click="addDishCount(row)" />
          </el-row>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="{ row }">
          <el-button :icon="Delete" circle type="danger" @click="deleteSelectedDish(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="visible" title="添加菜品" width="70%">
      <el-row justify="space-between">
        <el-col :span="15">
          <div class="top">
            <el-input placeholder="请输入菜品名称" />
          </div>
          <div class="content">
            <div class="category">
              <div
                class="item"
                :class="{ active: currentCategoryId === item.id }"
                v-for="item in categoryList"
                :key="item.id"
                @click="changeCategory(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="dish">
              <el-table border :data="dishList" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" label="序号" :selectable="defaultChecked" />
                <el-table-column align="center" prop="name" />
                <el-table-column align="center">
                  <template v-slot="{ row }">
                    <span>{{ row.status === 0 ? "停售" : "在售" }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <template v-slot="{ row }">
                    <el-tag type="danger">￥{{ row.price }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title">已选菜品({{ selectedDish.length }})</div>
          <div class="list">
            <div class="item" v-for="item in selectedDish" :key="item.id">
              <el-row>
                <el-col :span="20">
                  <div class="name">{{ item.name }}</div>
                  <div class="price">￥{{ item.price }}</div>
                </el-col>
                <el-col :span="4"
                  ><el-icon :size="30" color="#F56C6C" @click="deleteDish(item.id)"><CircleCloseFilled /></el-icon
                ></el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-button size="large" type="primary" @click="confirm">确定</el-button>
        <el-button size="large" @click="cancel">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, watch } from "vue"
import { getCategoryListAllAPI } from "@/api/category"
import { getDishListAPI } from "@/api/dish"
import { Delete, Plus, Minus } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"

const props = defineProps<{
  modelValue: any[]
}>()

const emit = defineEmits(["update:modelValue"])
// 弹框显示
const visible = ref<boolean>(false)

// 添加菜品
const addDish = () => {
  visible.value = true
  getDishCategory()
  console.log(selectedDish.value)
}

// 选择的菜品
const selectedDish = ref<any[]>(props.modelValue)

// 监听父组件数据的变化
watch(
  () => props.modelValue.length,
  () => {
    console.log(props.modelValue, selectedDish.value)

    if (props.modelValue.length > 0) {
      return
    }
    selectedDish.value = props.modelValue
    console.log("sasas")
  }
)
// 菜品分类
const categoryList = ref<any[]>([])

// 当前分类
const currentCategoryId = ref<number>(0)

// 获取菜品分类
const getDishCategory = async () => {
  const res = await getCategoryListAllAPI(1)
  if (res.code === 1) {
    categoryList.value = res.data
    currentCategoryId.value = categoryList.value[0].id
    getDishList()
  }
}

// 切换分类
const changeCategory = (id: number) => {
  currentCategoryId.value = id
  getDishList()
}

// 菜品分页数据
const pageData = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 菜品列表
const dishList = ref<any[]>([])

// 获取菜品信息
const getDishList = async () => {
  const res = await getDishListAPI({
    categoryId: currentCategoryId.value,
    page: pageData.value.page,
    pageSize: pageData.value.pageSize,
    status: 1
  })
  console.log(res)
  if (res.code === 1) {
    dishList.value = res.data.records
    pageData.value.total = res.data.total
  }
}

// 选择菜品菜品变化
const handleSelectionChange = (val: any[]) => {
  if (val.length <= 0) {
    return
  }

  val.forEach((item: any) => {
    item.copies = 1
    if (!selectedDish.value.includes(item)) {
      selectedDish.value.push(item)
    }
  })
}

// 取消
const cancel = () => {
  visible.value = false
}

// 确认
const confirm = () => {
  visible.value = false
  emit("update:modelValue", selectedDish)
}

// 删除菜品
const deleteDish = (id: number) => {
  selectedDish.value = selectedDish.value.filter((item: any) => item.id !== id)
}

// 删除已选择的菜品
const deleteSelectedDish = (id: number) => {
  selectedDish.value = selectedDish.value.filter((item: any) => item.id !== id)
  emit("update:modelValue", selectedDish)
  console.log("satr4tetetsas")
}
// 默认是否勾选
const defaultChecked = (row: any) => {
  return !selectedDish.value.some((item: any) => item.id === row.id)
}
// 菜品数量--
const reduceDishCount = (row: any) => {
  if (row.copies > 1) {
    row.copies--
  }
}

// 菜品数量++
const addDishCount = (row: any) => {
  if (row.copies < 10) {
    row.copies++
  } else {
    ElMessage.warning("最多只能购买10份")
  }
}
</script>

<style scoped lang="scss">
.setmealDish {
  width: 100%;
  padding: 20px;

  border: 1px solid #eaeaea;
  border-radius: 20px;
  .number {
    width: 50px;
    border: 1px solid #eaeaea;
    line-height: 30px;
  }
  .el-dialog {
    min-width: 800px;

    .el-row {
      .el-col:nth-child(1) {
        height: 600px;
        .content {
          margin-top: 20px;
          display: flex;
          .category {
            display: flex;
            flex-direction: column;
            background-color: #fff;
            width: 100px;
            align-items: center;
            height: 500px;
            overflow: auto;
            &::-webkit-scrollbar {
              display: none;
            }
            .item {
              padding: 10px 0;
              width: 100%;
              padding-left: 20px;
              font-weight: 700;
              cursor: pointer;
              &.active {
                background-color: #fcba04;
                color: #fff;
              }
            }
          }
          .dish {
            flex: 1;
            height: 500px;
            overflow: auto;
            margin-left: 20px;
            &::-webkit-scrollbar {
              display: none;
            }
          }
        }
      }
      .el-col:nth-child(2) {
        border: 1px solid #eaeaea;
        height: 600px;

        .title {
          width: 100%;
          height: 30px;
          background-color: #fcba04;
          color: #fff;
          font-size: 14px;
          padding-left: 10px;
          font-weight: 700;
        }
        .list {
          height: 500px;
          overflow: auto;
          &::-webkit-scrollbar {
            display: none;
          }
          display: flex;
          flex-direction: column;
          margin-top: 20px;
          width: 100%;
          gap: 10px;
          .item {
            &:nth-child(1) {
              border-top: 1px solid #eaeaea;
            }
            .el-col:nth-child(2) {
              border: none;
              align-items: center;
              height: 70px;
              line-height: 70px;
            }
            width: 100%;
            height: 70px;
            border-bottom: 1px solid #eaeaea;
            padding: 5px;
            .name {
              font-size: 18px;
              color: #333;
              margin-left: 20px;
            }
            .price {
              font-size: 16px;
              color: #999;
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
}

::v-deep(.el-dialog .el-table__header-wrapper .el-table__header) {
  display: none !important;
}
</style>
